<template>
    <section class="order-item">
      <div class="inner" >
          <div class="title">
              <span class="time">{{listinfo.addtime}}</span>
              <span class="order-num">订单号： {{listinfo.order_number}}</span>
          </div>
          <div class="order-detail clearfix" v-if="status==1">
              <div class="info clearfix" v-for="y in listinfo.goods">
                  <img :src= $Url+y.images  alt="img">
                  <div class="desc">
                      <p class="title">{{y.name}}</p>
                      <p class="sub-title">
                          {{y.factory}}
                      </p>
                      <p class="count">
                          <span>单价：￥{{y.nowprice}}</span>&nbsp;&nbsp;&nbsp;
                          <span>数量：{{listinfo.num}}</span>
                      </p>
                  </div>
              </div>
              <div class="price" >
                  ￥{{listinfo.zongprice}}
              </div>
              <div class="pay" style="display: none" >
                  ￥200 <br>
                  定金
              </div>
              <div class="status"  v-if="listinfo.type==1">
                  <p>{{listinfo.text}}</p>
                  <p @click="fun2()">查看物流</p>
                  <p @click="fun1()">申请退款</p>
              </div>
              <div class="status" :style="{'width':width+'px','padding-top':(width-60)+'px'}" v-if="listinfo.type==2">
                  <p>{{listinfo.text}}</p>
              </div>
              <div class="status" :style="{'width':width+'px','padding-top':(width-60)+'px'}" v-if="listinfo.type==3">
                  <p>{{listinfo.text}}</p>
              </div>
              <div class="option" :style="{'padding-top':width+'px'}" v-if="listinfo.type==1">
                  <Button type="primary" v-if="listinfo.status == 1">立即支付</Button>
                  <br>
                  <Button type="primary" @click="fun3()" v-if="listinfo.status == 8">确认收货</Button>
                  <p @click="fun(listinfo.id,listinfo.type,listinfo.text)" style="cursor: pointer">查看详情</p>
              </div>
              <div class="option" :style="{'width':(width+10)+'px','padding-top':listinfo.status == 6?(width-70)+'px':(width-60)+'px'}" v-if="listinfo.type==2" >
                  <Button type="primary" @click="fun3(listinfo.id,listinfo.type)" v-if="listinfo.status == 6">立即评价</Button>
                  <p @click="fun(listinfo.id,listinfo.type,listinfo.text)" v-if="listinfo.status == 7">查看详情</p>
              </div>
              <div class="option" :style="{'width':(width+10)+'px','padding-top':listinfo.status == 6?(width-80)+'px':(width-60)+'px'}" v-if="listinfo.type==3" >
                  <Button type="primary" @click="fun1()" v-if="listinfo.status == 9">重新退款</Button>
                  <p @click="fun(listinfo.id,listinfo.type,listinfo.text)" >查看详情</p>
              </div>
          </div>
          <div class="order-detail clearfix status2"  v-if="status==2" v-for="y in listinfo.project">
              <div class="info clearfix" >
                  <img :src= $Url+y.images  alt="img">
                  <div class="desc">
                      <p class="title">{{y.name}}</p>
                      <p class="sub-title">
                          {{y.hospital}}
                      </p>
                      <p class="count">
                          <span>单价：￥{{y.nowprice}}</span>&nbsp;&nbsp;&nbsp;
                          <span>数量：1</span>
                      </p>
                  </div>
              </div>
              <div class="price" >
                  ￥{{y.price}}
              </div>
              <div class="pay">
                  ￥{{y.yprice}}
                 <p> 定金</p>
              </div>
              <div class="status" v-if="listinfo.type==1" :style="{'padding-top':listinfo.status == 5?width+'px':(width+15)+'px'}">
                  <p :class="{'color':listinfo.status == 3}">{{listinfo.text}}</p>
                  <p v-if="listinfo.status == 5">售后/退款</p>
              </div>
              <div class="option" :style="{'padding-top':listinfo.status == 1?(width-5)+'px':(width-20)+'px'}" v-if="listinfo.type==1">
                  <Button type="primary" v-if="listinfo.status == 1">立即支付</Button>
                  <Button type="primary" v-if="listinfo.status == 2" @click="fun3(listinfo.id,listinfo.status)">立即评价</Button>
                  <Button type="primary" v-if="listinfo.status == 2" @click="fun4(listinfo.id,listinfo.status)">立即投诉</Button>
                  <br>
                  <p  style="cursor: pointer" @click="fun(listinfo.id,listinfo.type,listinfo.text)">查看详情</p>
              </div>
          </div>
      </div>
    </section>
</template>

<script>
export default {
  name: 'OrderItem',
    props: ['width','listinfo','text','status'],
    data () {
      return {
      }
    },
    created () {
      // console.log(this.listinfo)
    },

    methods :{
        fun (id,type,text) {
           if(this.status==1){
               if(type == 1){
                   this.$router.push({path:'/my/myindex/orderdelist',query:{id:id,type:text}})
               }else if(type == 2){
                   this.$router.push({path:'/my/myindex/managedelists',query:{id:id}})
               }if(type ==3){
                   this.$router.push({path:'/my/myindex/groundsrefundsdelist',query:{id:id,type:text}})
               }
           }else {
               if(type == 1){
                   this.$router.push({path:'/my/myorder/orderlistdelist',query:{id:id,type:text}})
               }
           }

       },
        fun1 () {
            this.$router.push({path:'/my/myindex/groundsrefunds'})
        },
        fun2 () {
            this.$router.push({path:'/my/myindex/logistics'})
        },
        fun3 (id,type) {
           if(this.status==1){
               if(type == 2){
                   this.$router.push({path:'/my/myindex/immediate',query:{id:id}})
               }
           }else {
               if(type == 6){
                   this.$router.push({path:'/my/myorder/evaluated',query:{id:id}})
               }
           }
        },
        fun4(id){
            this.$router.push({path:'/my/myorder/complaint',query:{id:id}})
        }
    }
}
</script>

<style scoped lang="less">
  @import "../../style/style.less";
  .inner {
     .color{
      color: #FE5371;
     }
      >.title {
          color: #666;
          font-size: 14px;
          span {
              display: inline-block;
              height: 38px;
              line-height: 38px;
          }
          .time {
              margin-right: 20px;
          }
      }
    .order-detail {
        border: 1px solid @border-color;
        padding: 15px;
        font-size: 14px;
        margin-bottom: 15px;
        >div {
            float: left;
            text-align: center;
        }
        .info {
            width: 290px;
            text-align: left;
            padding-right: 10px;
            img {
                width: 80px;
                height: 80px;
                display: inline-block;
                float: left;
                margin-right: 10px;
            }
            .desc {
                float: left;
                width: calc(~"100% - 90px");
                .title {
                    color: #333;
                    padding-top:8px;
                }
                .sub-title, .count {
                    color: #999;
                }

            }
        }
        .price  {
            width: 125px;
            padding-top: 35px;
        }
        .pay {
            width: 120px;
        }
        .status {
            width: 120px;
            padding-top: 10px;
            p{
                cursor: pointer;
            }
        }
        .option {
            width: 100px;
            /*text-align: right;*/
            button{
                margin-bottom: 5px;
            }
            p{
                cursor: pointer;
            }
        }
    }
      .status2{
          .info{
              width: 270px;
          }
          .price  {
              width: 80px;
              padding-top: 35px;
          }
          .pay {
              color: #333333;
              padding-top: 20px;
              width: 100px;
              text-align: left;
              padding-left: 45px;
              p{
                  /*text-align: center;*/
                  padding-left: 10px;
              }
          }
          .status {
              width: 100px;
              padding-top: 25px;
              text-align: center;
              padding-left: 30px;
              p{
                  cursor: pointer;
              }
          }
          .option {
              padding-left: 30px;
              width: 100px;
              padding-top: 10px;
              /*text-align: right;*/
              button{
                  margin-bottom: 5px;
              }
              p{
                  cursor: pointer;
              }
          }
      }
  }
</style>
